<template>
	<view class="full-page" v-if="totalPage">
		
	</view>
	<view class="writer_box" v-else>
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar leftIcon="arrow-left" title=" " bgColor="linear-gradient(to right, #41E4C8, #57E487)"
			:fixed="true" :titleStyle="titleStyle" @leftClick="$back"></u-navbar>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<u-navbar :autoBack="true" leftIconColor="#fff" bgColor="linear-gradient(to right, #41E4C8, #57E487)" :fixed="true">
			<view slot="center">
				<view class="serbox" style="margin-bottom: 0;">
					<image :src="'/images/search.png' | formatImgUrl" class="serpic" mode=""></image>
					<input type="text" class="serput" placeholder="搜索订单信息" style="width: 400rpx;" v-model="like" @input="onSearch">
				</view>
			</view>
			<view slot="right" style="position: relative;">
				<text class="display-flex" style="position: absolute;right: 0px;top: 0px;min-width: 8px;height: 8px;border-radius: 50%;background-color: #ED3232;font-size: 10px;color: #fff;justify-content: center;z-index: 1;" v-if="info.is_new"></text>
				<image :src="'/images/noticeicon.png' | formatImgUrl" mode="aspectFit" style="width: 24px;height: 24px;" @tap="toRoom"></image>
			</view>
		</u-navbar>
		<!-- #endif -->

		<view class="writer_user_box">
			<view class="writer_user_box1 display-flex just-between">
				<view class="writer_user_box1_left display-flex">
					<image :src="userInfo.pic | formatImgUrl" mode=""></image>
					<view class="">
						<view class="username">
							{{userInfo.username?userInfo.username:'默认昵称'}}
						</view>
						<text>dream号：{{userInfo.dream_id}}</text>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="writer_user_box1_right"  @tap="$go('/showcase/user/msg')">
					<image :src=" '/images/noticeicon.png'| formatImgUrl" mode=""></image>
					<!-- <text class="read_dot"></text> -->
				</view>
				<!-- #endif -->
				
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="serbox">
				<image :src="'/images/searchicon.png' | formatImgUrl" class="serpic" mode=""></image>
				<input type="text" class="serput" v-model="like" @input="onSearch" placeholder="搜索订单信息">
			</view>
			<!-- #endif -->
			

			<view class="writer_total-comments display-flex">
				<view class="left-box" @tap="$go('/showcase/showcase/yourcomments')">
					<image :src="'/images/shadow1.png' | formatImgUrl" class="shadow1" mode=""></image>
					<image :src="'/images/shadow2.png' | formatImgUrl" class="shadow2" mode=""></image>
					<view class="left-box-top display-flex">
						<text class="total-num">{{info.rank || 0}}</text>
						<view class="total-star">
							<u-rate :count="count" :value="info.rank" active-color="#fff" :disabled="true"></u-rate>
							<view class="total-font" >
								查看全部评价
							</view>
						</view>
					</view>
					<view class="right-box">
						<view class="display-flex mb12">
							<text>满意</text>
							<u-line-progress activeColor="#45C4B0" inactiveColor="rgba(216, 216, 216, 0.3)" :showText="false"
								:percentage="info.rank_l"></u-line-progress>
							<text class="fonttxt">{{info.rank_l || 0}}%</text>
						</view>
						<view class="display-flex mb12">
							<text>一般</text>
							<u-line-progress activeColor="#45C4B0" inactiveColor="rgba(216, 216, 216, 0.3)" :showText="false"
								:percentage="info.rank_ll"></u-line-progress>
							<text class="fonttxt">{{info.rank_ll || 0}}%</text>
						</view>
						<view class="display-flex">
							<text>不满</text>
							<u-line-progress activeColor="#45C4B0" inactiveColor="rgba(216, 216, 216, 0.3)" :showText="false"
								:percentage="info.rank_lll"></u-line-progress>
							<text class="fonttxt">{{info.rank_lll || 0}}%</text>
						</view>
					</view>

				</view>

				<view class="type-box">
					<view class="type-item display-flex" @tap="$go('/task/list/user_orderlist')">
						<image :src="'/images/typeicon33.png' | formatImgUrl" class="serpic" mode=""></image>
						<view class="">
							<view class="type-name">
								接单大厅
							</view>
							<view class="type-desc">
								快速匹配
							</view>
						</view>
					</view>
					<view class="type-item display-flex" style="margin-top: 24rpx;"
						@tap="userInfo.tuan_id=='0'?$go('/pages/user/collective'):$go('/pages/user/success?id='+userInfo.tuan_id)">
						<image :src="'/images/typeicon22.png' | formatImgUrl" class="serpic" mode=""></image>
						<view class="">
							<view class="type-name">
								团队入驻
							</view>
							<view class="type-desc">
								待入团
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="menulist display-flex">
			<view class="menuitem" @tap="$go('/showcase/showcase/showcase')">
				<image :src="'/images/menuicon1.png' | formatImgUrl" class="serpic" mode=""></image>
				<text>橱窗设置</text>
			</view>
			<view class="menuitem" @tap="$go('/pages/user/notice')">
				<image :src="'/images/menuicon2.png' | formatImgUrl" class="serpic" mode=""></image>
				<text>约文须知</text>
			</view>
			<!-- <view class="menuitem" @click="$go('/pages/user/manage')">
				<image :src="'/images/menuicon3.png' | formatImgUrl" class="serpic" mode=""></image>
				<text>展示设置</text>
			</view> -->
			<view class="menuitem" @tap="$go('/showcase/showcase/yourcomments')">
				<image :src="'/images/menuicon4.png' | formatImgUrl" class="serpic" mode=""></image>
				<text>写手评价</text>
			</view>
			<view class="menuitem" @tap="$go('/pages/user/grade')">
				<image :src="'/images/menuicon5.png' | formatImgUrl" class="serpic" mode=""></image>
				<text>写手等级</text>
			</view>
		</view>

		<view class="orbox">
			<scroll-view scroll-x="true" class="status-box">
				<text :class="status == it.value ? 'current' : ''" v-for="(it,ix) in statusList" :key="ix"
					@tap="selStatus(it)">{{it.name}}</text>
			</scroll-view>
			<view class="empytView" v-if="!list.total">
				<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
				<!-- <view>- 空列表 -</view> -->
			</view>

			<view class="orli" v-for="item in rowList" @tap="lookOrder(item)">
				<!-- <view v-if="navIndex == 1"
				 @click="item.status == 4 && !item.is_eval?$go('/pages/user/evaluate?id='+item.id):$go('/pages/user/orderdetail?id='+item.id)"> -->

				<view class="shbox">
					<image :src="item.user.pic | formatImgUrl" class="head" mode=""></image>
					<view class="shou">
						{{item.user.username}}
					</view>
					<view class="tuitxt">
						<text v-if="item.ref_status_fb == 2 || (item.ref_num > 0 && status == 5)" class="status1">已退款</text>
						<text v-else-if="item.res_status == 1" class="status1">申诉中</text>
						<text v-else-if="item.status == 4 && item.is_eval">已评价</text>
						<text v-else-if="item.status == 4 && item.is_eval == 0">待评价</text>
						<text v-else-if="item.ref_status==1 && item.is_tk == 0" class="status1">待处理</text>
						
						<text v-else-if="item.status_label=='已接单'" class="status3">进行中</text>
						<text v-else-if="item.status_label == '已支付'" class="status3">待接单</text>
						
						<text v-else class="status3">{{item.status_label}}</text>
					</view>
				</view>

				<view class="jjbox">
					<image :src="'/images/jj.png' | formatImgUrl" class="kpic" mode=""></image>
					<view class="jtxt">
						{{item.c_title}}
					</view>
				</view>
				<view class="dbox">
					<view class="dtxt display-flex">
						{{item.c_desc}}<text>| 共{{item.num}}单</text><text>| 共{{item.num || ''}}{{item.c_word_count || ''}}</text>
					</view>
					<view class="gong">
						共计支付
						<text class="active">{{item.cv_price?(Number(item.price - item.cv_price).toFixed(0)):Number(item.price).toFixed(0)}}</text>
						币
					</view>
				</view>
				<block v-if="item.ref_status_fb == 2">
					<view class="order-tip order-tip2 display-flex just-between">
						<view class="order-tip-left display-flex">
							<image :src="'/images/ordericon01.png' | formatImgUrl" mode="aspectFit"></image>
							<text class="status-txt">全部退款</text>
							<text class="status-desc">退还 {{Number(item.price).toFixed(0)}}粮币 至用户账户</text>
						</view>
					</view>
				</block>
				<block v-else-if="item.ref_status_fb == 1">
					<view class="order-tip order-tip2 display-flex just-between">
						<view class="order-tip-left display-flex">
							<image :src="'/images/ordericon01.png' | formatImgUrl" mode="aspectFit"></image>
							<text class="status-txt">部分退款</text>
							<text class="status-desc">退还 {{Number(item.ref_money).toFixed(0)}}粮币 至用户账户</text>
						</view>
						<view class="order-tip-right"  style="font-weight: bold;color: #3D3D3D;" @tap.stop="$go('/showcase/showcase/tuiList?oid='+item.id)">
							查看关联订单
						</view>
					</view>
				</block>
				<block v-else-if="item.ref_status==1&& item.is_tk == 0">
					<view class="order-tip order-tip2 display-flex just-between">
						<view class="order-tip-left display-flex">
							<image :src="'/images/ordericon01.png' | formatImgUrl" mode="aspectFit"></image>
							<text class="status-txt">用户退款</text>
							<text class="status-desc">用户发起退款申请，请尽快处理</text>
						</view>
					</view>
				</block>
				<block v-else-if="item.res_status==1">
					<view class="order-tip order-tip2 display-flex just-between">
						<view class="order-tip-left display-flex">
							<image :src="'/images/ordericon01.png' | formatImgUrl" mode="aspectFit"></image>
							<text class="status-txt">订单申诉</text>
							<text class="status-desc">订单正在申诉中，耐心等待申诉结果吧</text>
						</view>
				
					</view>
				</block>
				<block v-else-if="item.status==1">
					<view class="order-tip order-tip1 display-flex just-between">
						<view class="order-tip-left display-flex">
							<image :src="'/images/ordericon02.png' | formatImgUrl" mode="aspectFit"></image>
							<text class="status-txt">提前沟通</text>
							<text class="status-desc">请积极与用户沟通制作需求后接单</text>
						</view>
						<view class="order-tip-right" @tap.stop="toImRoom(item)">
							进行沟通
						</view>
					</view>
				</block>


				<block v-else-if="item.status==2">
					<view class="order-tip order-tip1 display-flex just-between">
						<view class="order-tip-left display-flex">
							<image :src="'/images/ordericon02.png' | formatImgUrl" mode="aspectFit"></image>
							<text class="status-txt">正在制作</text>
							<text class="status-desc">请在约定时间内完成稿件上传</text>
						</view>
					</view>
				</block>

				


				<block v-else-if="item.status==3">
					<view class="order-tip order-tip1 display-flex just-between">
						<view class="order-tip-left display-flex">
							<image :src="'/images/ordericon02.png' | formatImgUrl" mode="aspectFit"></image>
							<text class="status-txt">写手交稿</text>
							<text class="status-desc">已通知用户在规定时间内完成查收</text>
						</view>
						<view class="order-tip-right">
							<wly-countdown :day="getDateStr(item.dg_time,0)" :hour="getDateStr(item.dg_time,1)"
								:minute="getDateStr(item.dg_time,2)" :second="getDateStr(item.dg_time,3)"
								showType="slot">
								<template v-slot="{day, hour, minute, second}">
									<view class="display-flex" v-if="day||hour||minute||second">
										<view class="time_model" v-if="day">
											<view>
												{{day}}
											</view>
											<view>
												天
											</view>
										</view>
										<view class="time_model">
											<view>
												{{hour}}
											</view>
											<view>
												:
											</view>
										</view>
										<view class="time_model">
											<view>
												{{minute}}
											</view>
											<view>
												:
											</view>
										</view>
										<view class="time_model">
											<view>
												{{second}}
											</view>
										</view>
									</view>
								</template>
							</wly-countdown>
						</view>
					</view>
				</block>

				<!-- <block v-if="item.status == 4 && item.is_eval == 1">
						<view class="order-tip order-tip1 display-flex just-between">
							<view class="order-tip-left display-flex">
								<image :src="'/images/ordericon02.png' | formatImgUrl" mode="aspectFit"></image>
								<text class="status-txt">发布评价</text>
								<text class="status-desc">已收到来自用户的订单评价</text>
							</view>
							<view class="order-tip-right">
								立即查看
							</view>
						</view>
					</block> -->
				<block v-else-if="item.status == 4">
					<view class="order-tip order-tip1 display-flex just-between">
						<view class="order-tip-left display-flex">
							<image :src="'/images/ordericon02.png' | formatImgUrl" mode="aspectFit"></image>
							<text class="status-txt">订单完成</text>
							<text class="status-desc"
								@tap.stop="$go('/pages/user/orderdetail?id='+item.id)">点击查看详情可查看完整订单信息</text>
						</view>
					</view>
				</block>

				<view class="buttons display-flex">
					<block v-if="item.ref_status_fb != 2 && item.is_acceptance == 0">
					<block v-if="item.status==1">
						<view class="button-item button1" @tap.stop="currentItem=item,showPop=true">
							拒绝接单
						</view>

					</block>
					
					<block v-if="item.res_status==0 && item.status!=4 && item.status!=5 && item.status!=1">
						<view class="button-item button1" @tap.stop="$go('/pages/find/reportEva?id='+item.id+'&newtype=6')"
							v-if="item.res_status == 0">
							申诉订单
						</view>
					</block>
					</block>

					<!-- <block v-if="item.ref_status == 1">
						<view class="button-item button1">
							删除记录
						</view>
					</block> -->
					<view class="button-item button2" @tap.stop="lookOrder(item)">
						查看详情
					</view>
				</view>


			</view>
		</view>
		
		<u-popup mode="center" :show="show1">
			<view class="mask">
				<view class="matitle">
					是否确定完成订单
				</view>
				<view class="matxt">
					完成后钱款将进入对方账户
				</view>
				<view class="quque">
					<view class="quli" @click="show1=false">
						取消
					</view>
					<view class="quli quactive" @click="goToroom">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 取消订单 -->
		<u-popup mode="center" :show="showPop">
			<view class="mask">
				<view class="matitle">
					<text>确定拒绝订单吗？</text>
				</view>
				<view class="matxt">
					此操作不可更改
				</view>
				<view class="quque">
					<view class="quli" @click="showPop = false">
						取消
					</view>
					<view class="quli quactive" @click="goToindex">
						确定
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import * as db from '@/common/db.js'
	import {
	  TUIConversationService,
	} from "@tencentcloud/chat-uikit-engine";
	export default {
		data() {
			return {
				titleStyle: {
					color: '#fff'
				},
				count: 5,
				value: 4.8,
				navIndex: 1,
				statusList: [{
						name: '全部',
						value: ''
					}, {
						name: '待接单',
						value: 1
					}, {
						name: '进行中',
						value: 2
					}, {
						name: '定稿中',
						value: 3
					},{
						name: '待处理',
						value: 4
					},
					{
						name: '已退款',
						value: 5,
					},
					{
						name: '申诉中',
						value: 6,
					},{
						name:'已完成',
						value:7,
					},
					{
						name: '待评价',
						value: 8,
					},{
						name: '已取消',
						value: 9,
					}
					
				],
				page: 1,
				status: '',
				list: {},
				rowList: [],
				userInfo: this.$db.get('userInfo'),
				info: {},
				like: '',
				currentItem: {},
				show1: false,
				showPop: false,
				totalPage: true,
				isClick: true
			}
		},
		onLoad(e) {
			console.log(this.userInfo, 'userInfo');
			if (e.type && e.status) {
				this.navIndex = e.type
				this.status = e.status
				this.getList()
			}

			this.getDatas()
		},
		onShow() {
			this.getList()
		},
		// 上拉加载
		onReachBottom() {
			if (this.list.current_page < this.list.last_page) {
				this.page++; // 页数加一，加载下一页数据
				this.getList();
			}
		},
		methods: {
			getMsgState(){
				this.$api.default.request('user/look_msg_dea', {}, 'POST', false).then((res) => {
					if (res.code) {
						
					}
				})
			},
			// 取消退款
			closeRefund(){
				this.$api.default.request('order/qxRefOrder', {
					oid: this.currentItem.id
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.$common.successToShow(res.msg, () => {
							this.page = 1
							this.getList();
						})
					}
				})
			},
			onSearch(){
				this.page = 1
				this.getList();
			},
			// 通知消息
			toRoom(){
				// this.$store.commit('createConversationActive', 'administrator')
				// // this.$store.commit('updateConversationActive', item)
				// uni.navigateTo({
				// 	url: '/pages/tim/room'
				// })
				this.getMsgState()
				
				TUIConversationService.switchConversation('C2Cwritermsg');
				uni.navigateTo({
					url: '/TUIKit/components/TUIChat/index'
				})
			},
			showTips(){
				this.$common.successToShow("暂时还未开放", () => {
				})
				
			},
			// 综合评价
			getDatas() {
				this.$api.default.request('user/get_comlist_dea', {
					id: this.userInfo.uid
				}).then((res) => {
					if (res.code) {
						this.info = res.data
						this.value = Math.floor(res.data.comprehensive)
					}
				})
			},
			// 完成订单
			goToroom(item) {
				this.$api.default.request('order/userConfirmOrder', {
					id: this.currentItem.id
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.$common.successToShow(res.msg, () => {
							this.show1=false
							this.page = 1
							this.getList()
						})
					}
				})
			},
			getDateStr(mss, type) {
				var days = parseInt(mss / 86400);
				var hours = parseInt((mss - (days * 86400)) / 3600);
				var minutes = parseInt((mss - (days * 86400) - (hours * 3600)) / 60);
				var seconds = mss - (days * 86400) - (hours * 3600) - (minutes * 60)

				if (type == 0) {
					return days;
				}
				if (type == 1) {
					return hours;
				}
				if (type == 2) {
					return minutes;
				}
				if (type == 3) {
					return seconds;
				}

			},
			// 立即沟通
			toImRoom(item) {
				// console.log(133333333333)
				// if (this.$db.get('userInfo').membe_id == item.writer_uid) {
				// 	console.log(111111111111111)
				// 	this.$store.commit('createConversationActive', item.uid)
				// 	var url = '/pages/tim/room?userType=1&showbox=1&uid=' + item.writer_uid
				// } else {
				// 	console.log(22222222222)
				// 	this.$store.commit('createConversationActive', item.writer_uid)
				// 	var url = '/pages/tim/room?userType=1&showbox=1&uid=' + item.uid
				// }

				// uni.navigateTo({
				// 	url: url
				// })
				
				let userProfile = {}
				if (this.$db.get('userInfo').membe_id == item.writer_uid) {
					userProfile = item.user
				}else{
					userProfile = item.writer
				}
				
				if(!this.isClick){
					
					return
				}
				this.isClick = false
				
				uni.request({
				    url: 'https://api.dreamyuewen.com/api/user/userInfo', 
				    data: {
				       uid: userProfile.membe_id,
				    },
				    header: {
				        token: db.get('auth')
				    },
				    success: (res) => {
				        uni.setStorageSync("userItem",res.data.user);
						
						uni.request({
						    url: 'https://api.dreamyuewen.com/api/user/userPageList', 
						    data: {
						       uid: userProfile.membe_id,
							   page: 1,
							   type: 1
						    },
						    header: {
						        token: db.get('auth')
						    },
						    success: (ress) => {
						        uni.setStorageSync("userPageList",ress.data.data.data);
								
								uni.request({
								    url: 'https://api.dreamyuewen.com/api/order/getTimOrderList', 
								    data: {
								       uid: userProfile.membe_id,
								    },
								    header: {
								        token: db.get('auth')
								    },
								    success: (resss) => {
										setTimeout(()=> {
											this.isClick = true
										}, 2000);
								        uni.setStorageSync("orderList",resss.data.data);
										
										TUIConversationService.switchConversation('C2C'+userProfile.membe_id);
										uni.navigateTo({
											url: '/TUIKit/components/TUIChat/index'
										})
								    }
								});
						    }
						});
				    }
				});
				
				
					
					
					
					
					
				// emits("handleSwitchConversation", item.conversationID);
				
				
			},
			// 取消订单
			closeOrder() {
				this.showPop = false
				// console.log('close');
			},
			goToindex(item) {
				this.$api.default.request('order/closeOrder', {
					id: item.id
				}).then((res) => {
					if (res.code) {
						this.$common.successToShow(res.msg, () => {
							uni.redirectTo({
								url: '/pages/index/index'
							})
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			lookOrder(item) {

				var url = ''
				if (this.$db.get('userInfo').membe_id == item.uid) {
					url = '/pages/user/orderdetail?id=' + item.id
				}
				if (this.$db.get('userInfo').membe_id == item.writer_uid) {
					url = '/pages/my/connect?id=' + item.id
				}

				// if(item.status == 1){
				// 	url = '/pages/my/connect'
				// }else if(item.status == 2){
				// 	url = '/pages/my/seeorder'
				// }else{
				// 	url = '/pages/user/orderdetail'
				// }
				//pages/user/orderdetail

				uni.navigateTo({
					url: url
				})
			},
			selStatus(item) {
				this.status = item.value
				this.page = 1
				this.show = false
				this.getList()
			},
			getList() {
				this.$api.default.request('order/orderList1', {
					status: this.status,
					type: 2,
					page: this.page,
					like: this.like
				}).then((res) => {
					if (res.code == 1) {
						this.list = res.data
						if (res.data.current_page > 1) {
							res.data.data.forEach((item) => {
								this.rowList.push(item)
							})
						} else {
							this.rowList = res.data.data
						}
					}
					
					this.totalPage = false
				})
			},
			// 点击切换
			navTap(item) {
				this.navIndex = item.id
				this.page = 1
				this.status = ''
				this.getList()
			},
			// 编辑弹框
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
			},
			$back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F2F5F2;
	}

	/deep/.u-icon__icon {
		color: #fff !important;
	}

	.writer_box {
		/* #ifdef MP-WEIXIN */
		padding-top: calc(var(--status-bar-height) + 111rpx);
		/* #endif */
		/* #ifdef APP-PLUS */
		padding-top: calc(var(--status-bar-height) + 51rpx);
		/* #endif */

		width: 100%;
		// height: 37vh;
		/* #ifdef MP-WEIXIN */
		height: 600rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		height: 540rpx;
		/* #endif */

		background: linear-gradient(to right, #41E4C8, #57E487);
		background-size: 100% 100%;
		position: relative;

		.writer_user_box {
			padding: 30rpx;
			padding-bottom: 50rpx;
			background: linear-gradient(to bottom, rgba(#F2F5F2, .0) 56%, rgba(#F2F5F2, 1) 100%);
		}
	}

	.writer_user_box1 {
		padding: 30rpx 0;
	}

	.writer_user_box1_left {
		font-family: Source Han Sans CN;
		font-size: 14px;
		color: #FFFFFF;

		.username {
			width: 400rpx;
			font-weight: bold;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-family: Source Han Sans CN;
			font-size: 18px;
			color: #FFFFFF;
			margin-bottom: 5rpx;
		}

		image {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			margin-right: 16rpx;
		}

	}

	.writer_user_box1_right {
		width: 40px;
		height: 40px;
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.3);
		box-sizing: border-box;
		box-shadow: inset 0px 4px 10px 0px rgba(255, 255, 255, 0.3);
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 48rpx;
			height: 48rpx;
		}

		.read_dot {
			position: absolute;
			right: 18rpx;
			top: 18rpx;
			width: 7px;
			height: 7px;
			background: #ED3232;
			border-radius: 50%;
			z-index: 1;
		}
	}

	.serbox {
		display: flex;
		align-items: center;
		background: #F8F8F8;
		border-radius: 142px;
		height: 72rpx;
		padding: 0 26.66rpx;
		margin-bottom: 20rpx;

		.serpic {
			width: 32rpx;
			height: 32rpx;
			flex-shrink: 0;
		}

		.serput {
			padding: 0 16rpx;
			width: 500rpx;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.writer_total-comments {

		.left-box {
			position: relative;
			width: 60%;
			background: #3D3D3D;
			border-radius: 12px;
		}
		
		.shadow1{
			position: absolute;
			right: 0;
			top: 0;
			width: 166px;
			height: 150px;
		}
		
		.shadow2{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 166px;
			height: 150px;
		}

		.left-box-top {
			padding: 20rpx;
			box-sizing: border-box;
		}

		.total-num {
			font-family: Source Han Sans CN;
			font-size: 40px;
			font-weight: bold;
			font-feature-settings: "kern" on;
			color: #fff;
			margin-right: 10rpx;
		}

		.total-font {
			font-family: Source Han Sans CN;
			font-size: 12px;
			color: #fff;
			padding-left: 10rpx;
		}

		.sort-type {
			justify-content: space-between;
			font-family: Source Han Sans CN;
			font-size: 12px;
			color: #fff;
		}

		.right-box {
			padding: 20rpx;
			font-family: Source Han Sans CN;
			font-size: 10px;
			color: #fff;
			background: rgba(255, 255, 255, 0.15);
			border-radius: 12px;

			.fonttxt {
				width: 60rpx;
			}
		}

		.mb12 {
			margin-bottom: 15rpx;
		}
	}

	/deep/.u-line-progress {
		margin: 0 8rpx;
		// width: 200rpx;
	}

	.type-box {
		margin-left: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.type-item {
			width: 150px;
			height: 69px;
			border-radius: 12px;
			background: #FFFFFF;
			justify-content: center;
		}

		image {
			width: 80rpx;
			height: 80rpx;
			margin-right: 16rpx;
		}

		.type-name {
			font-family: Source Han Sans CN;
			font-size: 15px;
			color: #3D3D3D;
		}

		.type-desc {
			margin-top: 5rpx;
			font-family: Source Han Sans CN;
			font-size: 13px;
			color: #999999;
		}
	}

	.menulist {
		margin: 30rpx;
		margin-top: -15rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #fff;
		border-radius: 12px;
		padding: 24rpx 20rpx;

		.menuitem {
			display: flex;
			align-items: center;
			flex-direction: column;
			font-family: Source Han Sans CN;
			font-size: 10px;
			color: #3D3D3D;
		}

		image {
			width: 48rpx;
			height: 48rpx;
			margin-bottom: 10rpx;
		}
	}

	// 10.16新增
	.status-box {
		white-space: nowrap;
		padding-bottom: 24rpx;
		font-family: Source Han Sans CN;
		font-size: 14px;
		color: #999999;

		text {
			margin-right: 24rpx;
		}

		.current {
			font-weight: bold;
			color: #3D3D3D;
		}
	}

	page {
		background: rgba(242, 245, 242, 1);
	}

	.orbox {
		padding: 20rpx 30rpx;

		.ortop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;

			.ortitle {
				font-size: 32rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
			}

			.oryou {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.orpic {
					width: 32rpx;
					height: 32rpx;
				}

				.saitxt {
					padding-left: 32rpx;
					font-size: 24rpx;
					font-weight: normal;
					text-align: right;
					letter-spacing: 0em;
					color: #999999;
				}
			}
		}

		.orli {
			padding: 20rpx 20rpx 16rpx;
			border-radius: 8px;
			opacity: 1;
			background: #FFFFFF;
			margin-bottom: 20rpx;

			.shbox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 26rpx;

				.head {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					flex-shrink: 0;
				}

				.shou {
					flex-grow: 1;
					padding: 0 12rpx;
					font-size: 24rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
				}

				.taitxt {
					font-size: 20rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
					flex-shrink: 0;
				}

				.tuitxt {
					font-size: 20rpx;
					color: #999999;

					.status1 {
						color: #ED3232;
					}

					.status2 {
						color: #3D3D3D;
					}

					.status3 {
						color: #45C4B0;
					}
				}

				.lv {
					color: #45C4B0;
					font-weight: bold;
				}
			}

			.jjbox {
				display: flex;
				align-items: center;

				.kpic {
					width: 32rpx;
					height: 32rpx;
				}

				.jtxt {
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
					padding-left: 12rpx;
				}
			}

			.dbox {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;

				.dtxt {
					font-size: 20rpx;
					color: #3D3D3D;

					text {
						padding-left: 8rpx;
						font-size: 20rpx;
						color: #999999;
					}
				}

				.gong {
					font-size: 20rpx;
					color: #999999;

					text {
						font-size: 36rpx;
						color: #3D3D3D;
						padding: 0 8rpx;
						font-weight: bold;
					}

					.active {
						font-weight: bold;
						color: #3d3d3d;
					}

					.lv {
						color: #45C4B0;
					}
				}
			}
		}
	}

	.mask {
		background: #F2F5F2;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		overflow: hidden;

		.mabox {
			margin-bottom: 20rpx;

			.matop {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 50rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				background-color: #ffffff;

				.mapic {
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}

				.matxt {
					flex-grow: 1;
					font-size: 28rpx;
					padding: 0 16rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
				}
			}
		}

		.qubox {
			line-height: 120rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: bold;
			letter-spacing: 0em;
			color: #3D3D3D;
			height: 120rpx;
			opacity: 1;
			background: #FFFFFF;
		}
	}

	.order-tip {
		padding: 16rpx 25rpx;
		border-radius: 4px;
		margin: 20rpx 0;

		image {
			width: 24rpx;
			height: 24rpx;
		}

		.status-txt {
			font-family: Source Han Sans CN;
			font-size: 10px;
			font-weight: bold;
			margin: 0 8rpx;
		}

		.order-tip-right,
		.status-desc {
			font-family: Source Han Sans CN;
			font-size: 10px;
		}
	}

	// 待接单 进行中
	.order-tip1 {
		background: rgba(69, 196, 176, 0.15);

		.status-txt {
			color: #45C4B0;
		}

		.order-tip-right,
		.status-desc {
			color: #45C4B0;
		}
	}

	// 待处理 已退款
	.order-tip2 {
		background: #F2F5F2;

		.status-txt {
			color: #3D3D3D;
		}

		.order-tip-right,
		.status-desc {
			color: #3D3D3D;
		}
	}

	.buttons {
		justify-content: flex-end;

		.button-item {
			width: 62px;
			height: 20px;
			border-radius: 94px;
			padding: 3px 10px;
			font-family: Source Han Sans CN;
			font-size: 10px;
			margin-left: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.button1 {
			background: #F2F5F2;
			color: #999999;
		}

		.button2 {
			background: rgba(69, 196, 176, 0.15);
			color: #45C4B0;
		}
	}

	.mask {
		background-color: #ffffff;
		width: 534rpx;
		border-radius: 8px;
		padding-top: 48rpx;

		.matitle {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			letter-spacing: 0em;
			color: #3D3D3D;
			padding-bottom: 6rpx;
			line-height: 46rpx;
		}

		.matxt {
			font-size: 24rpx;
			font-weight: normal;
			text-align: center;
			letter-spacing: 0em;
			color: #999999;
			line-height: 34rpx;
			padding-bottom: 50rpx;
		}

		.quque {
			display: flex;
			align-items: center;
			border-top: 1px solid rgba(153, 153, 153, 0.1);

			.quli {
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #3D3D3D;
			}

			.quactive {
				background: rgba(69, 196, 176, 0.05);
			}
		}
	}

	.order-tip2 {
		background: #F2F5F2;

		.status-txt {
			color: #3D3D3D;
		}

		.order-tip-right,
		.status-desc {
			color: #3D3D3D;
		}
	}

	.buttons {
		justify-content: flex-end;

		.button-item {
			width: 62px;
			height: 20px;
			border-radius: 94px;
			padding: 3px 10px;
			font-family: Source Han Sans CN;
			font-size: 10px;
			margin-left: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.button1 {
			background: #F2F5F2;
			color: #999999;
		}

		.button2 {
			background: rgba(69, 196, 176, 0.15);
			color: #45C4B0;
		}
	}
	
	/deep/.scoped-ref view{
		display: flex;
		align-items: center;
	}
	
	.time_model{
		display: flex;
		align-items: center;
	}
</style>